<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform</title>
    <style type="text/css">
        .box{
            width: 400px;
            height: 400px;
            background-color: #6DDCBD;
            margin: 100px auto;
            transition: all 500ms ease;
            transform: rotate(0deg);
        }
        .box:hover{
            /*transform: translate(100px,50px); !* 位移 性能高于 left top *!*/
            /*transform: scale(1.2,0.5); !* 缩放 *!*/
            /*transform: rotate(0deg); !* 旋转 *!*/
            transform: skew(30deg,0deg); /* 斜切 */
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: darkorange;
            margin: 100px auto;
            transition: all 500ms ease;
            transform: rotate(0deg);
        }
        .box2:hover{
            transform-origin: top; /* 设置旋转中心 默认为center */
            transform: rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
    <div class="box2">
    </div>
</body>
</html>